<template>
  <div class="police-alarm-list">
    <div ref="dgtools" class="filter-container">
      <div class="dgts-row">
        <el-form 
          :model="dg.ps" 
          :inline="true" 
          @keyup.enter.native="getDgList(1)">
          <el-form-item>
            <el-select 
              v-model="dg.ps.remindType" 
              placeholder="项目类型" 
              style="width: 120px" 
              clearable>
              <el-option 
                v-for="item in typeOptions" 
                :key="item.value" 
                :label="item.label" 
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select
              filterable clearable
              v-model="dg.ps.belongCompany"
              placeholder="挂靠公司"
              style="width: 150px">
              <el-option 
                v-for="item in companyOptions" 
                :key="item.id" 
                :label="item.unitName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-input 
              v-model="dg.ps.plateNum" 
              placeholder="查询车牌号" 
              maxlength="11" 
              style="width: 100px;"
            />
          </el-form-item>

          <el-form-item>
            <el-select
              v-model="dg.ps.seats"
              placeholder="座位数"
              style="width: 90px"
              clearable>
              <el-option 
                v-for="it in seatsOptions" 
                :key="it.value" 
                :label="it.label+'座'"
                :value="it.value">
                <span>{{it.label}}座</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-button 
            type="primary" 
            icon="el-icon-edit-outline" 
            @click="getDgList(1)">
            搜索
          </el-button>

          <el-button 
            type="primary" 
            icon="el-icon-s-claim" 
            @click="setUpdCarDataMd({state: true})">
            车辆资料更新
          </el-button>
          
          <el-button 
            type="primary" 
            icon="el-icon-timer" 
            @click="setPresetMaintainDateMd({state: true})">
            预设保养时间
          </el-button>
        </el-form>
      </div>

      <TableSelfSet 
        v-if="dg.columns.length > 0" 
        :tbTitle="'车辆报警'" 
        :dgName="dg.dgName" 
        :tbId="dg.tbName"
        :srcCols="dg.srcCols" 
        :columns="dg.columns" 
        @saveSet="saveTbSet"
      />
    </div>
    <el-table
      :ref="dg.tbName"
      :data="dg.list"
      row-key="id"
      :height="bodyHeight"
      border fit 
      :row-class-name="rowClassName"
      @header-dragend="dragHeader"
      @selection-change="selRowChange">
      <el-table-column 
        fixed="left" 
        type="index" 
        label="编号"
        align="center" 
        :resizable="false" 
        width="40">
      </el-table-column>
      <el-table-column 
        fixed="left" 
        type="selection" 
        align="center" 
        :resizable="false" 
        width="40">
      </el-table-column>
      <el-table-column 
        v-for="(col, index) in dg.columns" 
        :key="index"
        :class-name="dg.dgName"
        :prop="col.field"
        :label="col.label"
        :width="col.width">
        <template slot-scope="{row}">
          <template v-if="col.field == 'license'">
            <span :style="setCls(row.reminds, 'LICENSE_INSPECT')">
              {{ setTime(row.reminds, 'LICENSE_INSPECT') }}
            </span>
          </template>

          <template v-else-if="col.field == 'operation'">
            <span :style="setCls(row.reminds, 'OPERATION_INSPECT')">
              {{ setTime(row.reminds, 'OPERATION_INSPECT') }}
            </span>
          </template>

          <template v-else-if="col.field == 'report1'">
            <span :style="setCls(row.reminds, 'THIRD_SAFE')">
              {{ setTime(row.reminds, 'THIRD_SAFE') }}
            </span>
          </template>

          <template v-else-if="col.field == 'report2'">
            <span :style="setCls(row.reminds, 'COMPULSORY')">
              {{ setTime(row.reminds, 'COMPULSORY') }}
            </span>
          </template>

          <template v-else-if="col.field == 'report3'">
            <span :style="setCls(row.reminds, 'CARRIER_SAFE')">
              {{ setTime(row.reminds, 'CARRIER_SAFE') }}
            </span>
          </template>

          <template v-else-if="col.field == 'first'">
            <span :style="setCls(row.reminds, 'FIR_REPAIR')">
              {{ setTime(row.reminds, 'FIR_REPAIR') }}
            </span>
          </template>

          <template v-else-if="col.field == 'tow'">
            <span :style="setCls(row.reminds, 'SEC_REPAIR')">
              {{ setTime(row.reminds, 'SEC_REPAIR') }}
            </span>
          </template>

          <template v-else>{{ getColVal(row, col.field) }}</template>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-show="dg.total > 0"
      :total="dg.total"
      :page.sync="dg.ps.page"
      :limit.sync="dg.ps.rows"
      @pagination="getDgList()"
    />

    <UpdCarData
      v-if="updCarDataMd.state"
      :myData="updCarDataMd"
      @myClick="setUpdCarDataMd"
      @reloadDg="getDgList()"
    />

    <ParsetMaintainDate
      v-if="presetMaintainDateMd.state"
      :myData="presetMaintainDateMd"
      @myClick="setPresetMaintainDateMd"
      @reloadDg="getDgList()"
    />

  </div>
</template>
<script>
import {mapGetters} from "vuex";
import DataGridBase from '@/views/mixins/DataGridBase';
import DataGridResize from '@/views/mixins/DataGridResize';
import TableSelfSet from '@/components/TableSelfSet';
import Pagination from '@/components/Pagination';

import UpdCarData from './UpdCarData'
import ParsetMaintainDate from "@/views/logistics-man/car-list/add-maintenance";

import * as commonSer from "@/api/services/common.service";
import * as logisticsSer from "@/api/services/logistics.service";

export default {
  mixins: [DataGridBase, DataGridResize],
  components: {TableSelfSet, Pagination, UpdCarData, ParsetMaintainDate},
  computed: {
    ...mapGetters(["lunitNum"]),
  },
  data() {
    let cols = [
      {label: '车牌号', field: 'plateNum', width: 100},
      {label: '座位数', field: 'seats', width: 70},
      {label: '行驶证', field: 'license', width: 100},
      {label: '运营证', field: 'operation', width: 100},
      {label: '第三者保险', field: 'report1', width: 100},
      {label: '交强险', field: 'report2', width: 100},
      {label: '承运人保险', field: 'report3', width: 100},
      {label: '一保', field: 'first', width: 100},
      {label: '二保', field: 'tow', width: 100},
      {label: '挂靠公司', field: 'customId.unitName', width: 200},
    ];
    return {
      dg: {
        dgName: 'dg',
        tbName: 'policeAlarmTb',
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: { // 过滤参数
          page: 1, rows: 20,
          // 提醒类型
          remindType: '',
          // 挂靠公司名称
          belongCompany: '', 
          // 车牌号 
          plateNum: '', 
          // 座位数
          seats: '', 
        },
      },
      
      // 更新-车辆资料-弹框
      updCarDataMd: {state: false},
      // 预设保养时间
      presetMaintainDateMd: {state: false},

      // 项目类型-选择数据
      typeOptions: [
        {label: '一保', value: 'FIR_REPAIR'},
        {label: '二保', value: 'SEC_REPAIR'},
        {label: '第三者险', value: 'THIRD_SAFE'},
        {label: '承运人险', value: 'CARRIER_SAFE'},
        {label: '行驶证年审', value: 'LICENSE_INSPECT'},
        {label: '营运证年审', value: 'OPERATION_INSPECT'},
        {label: '交强险', value: 'COMPULSORY'},
      ],
      // 座位数-选择数据
      seatsOptions: [],  
      // 挂靠公司-选择数据
      companyOptions: [], 

    }
  },
  created() {
    const that = this;

    that.initTbSetData(that.dg.dgName);
    that.getDgList();

    that.init();
  },
  methods: {
    init() {
      const that = this;

      // 获取-挂靠公司-选择数据
      commonSer.getCompanyCusIsDependDict({unitNum: that.lunitNum}).then(res => {
        that.companyOptions = res?.data || [];
      });

      // 获取-座位数-选择数据
      commonSer.getAllSeatsDict({minSeats: 0}).then(res => {
        that.seatsOptions = res?.seats.map(it => ({label: it, value: Number(it)})) || [];
      });
    },
    // 设置-日期
    setTime(list, type) {
      let current = list.find(it => it.remindType === type);
      if (current) return this.U.datefmt(current.nextRemindTime, 'yyyy-MM-dd');
      return '未设置';
    },
    // 设置-样式
    setCls(list, type) {
      let color = ''
      let current = list.find(it => it.remindType === type);
      if (!current) {
        color = '#717377'
      } else {
        let ret = this.U.checkOverdue(current.nextRemindEarlyTime);
        color = ret ? 'red' : '#717377';
      }
      return { color };
    },

    // 获取-表格列表
    getDgList(page){
      const that = this, U = that.U, dg = that.dg, ps = U.scopy(dg.ps);
      
      if(page) ps.page = page;
      logisticsSer.getVehicleRemindsList(ps).then(res => {
        if(res?.code != 1){
          U.qerror(res.msg);
        }else{
          let list = res?.data || [];
          list.forEach(it => {it.dgName = dg.dgName;});
      
          dg.list = list;
          dg.total = res?.count || 0;
        }
      });
    },

    // 显示/隐藏-更新车辆证件资料-弹框
    setUpdCarDataMd(e) {
      const that = this, U = that.U, md = that.updCarDataMd, rows = that.getSeledRows();

      if(!e.state){
        md.obj = null;
        md.state = false;
      }else{
        if(rows.length != 1){
          U.qerror('请选择一辆车');
        }else{
          md.obj = rows[0];
          md.state = true;
        }
      }
    },

    // 显示/隐藏-预设保养时间-弹框
    setPresetMaintainDateMd(e) {
      const that = this, U = that.U, md = that.presetMaintainDateMd, rows = that.getSeledRows();

      if(!e.state){
        md.repairIdArr = null;
        md.state = false;
      }else{
        if(rows.length != 1){
          U.qerror('请选择一辆车');
        }else{
          md.repairIdArr = rows.map(it => it.id);
          md.state = true;
        }
      }
    },
    

    // handlePreset() {
    //   const rows = this.dg.selRows;
    //   if (rows.length !== 1) {
    //     return this.U.qerror("请选择一辆车");
    //   }
    //   this.currentData = rows[0]
    //   this.md.parset.state = true;
    // },

    // handleUpdate() {
    //   const rows = this.dg.selRows;
    //   if (rows.length !== 1) {
    //     return this.U.qerror("请选择一辆车");
    //   }
    //   this.currentData = rows[0]
    //   this.md.upd.state = true
    // },


  }
};
</script>
